@page "/donut-chart"

<h1>Radzen Blazor Chart donut series</h1>
<RadzenExample Name="DonutChart" DocumentationUrl="https://www.radzen.com/documentation/blazor/chart/" Heading="false">
    <div class="row">
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenChart>
                <RadzenDonutSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue">
                    <TitleTemplate>
                        <div class="rz-donut-content">
                            <div>Revenue</div> 
                            <div>for 2020</div>
                        </div>
                    </TitleTemplate>
                </RadzenDonutSeries>
            </RadzenChart>
        </div>
    </div>
</RadzenExample>

@code {
    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    DataItem[] revenue = new DataItem[] {
    new DataItem
    {
    Quarter = "Q1",
    Revenue = 30000
    },
    new DataItem
    {
    Quarter = "Q2",
    Revenue = 40000
    },
    new DataItem
    {
    Quarter = "Q3",
    Revenue = 50000
    },
    new DataItem
    {
    Quarter = "Q4",
    Revenue = 80000
    },
    };
}